import React, { useEffect } from 'react';
import { Button, Form, Input, Select, Space, message } from 'antd';
import { useNavigate, useSearchParams } from "react-router-dom"
import Axios from 'axios';
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
const Addpay = () => {//收钱
    //接收参数
    const [searchParams] = useSearchParams();//searchParams.get("id") 来从查询参数中获取名为 "id" 的参数的值（?后面的部分）。
    const id = searchParams.get("id");//如果该参数存在，它的值将被存储在 id 变量中；否则，id 的值将是 null。
    console.log("id", id);
    const [form] = Form.useForm();
    useEffect(() => {
        if (id) {
            //让显示修改数据执行一次
            //1.根据id去查看对应的数据
            Axios.get("http://localhost:3000/pay/getByid", {
                params: {
                    id
                }
            }).then((res) => {
                console.log("res", res);
                //2.将查到的数据显示在表单上
                form.setFieldsValue({
                    name: res.data.data.rname,
                    rID: res.data.data.rID,
                    payment: res.data.data.cost,
                    money: res.data.data.money
                })//给表单一个初始值
            }).catch((err) => {
                console.log(err);
            })

        }
    }, [id])

    const navigate = useNavigate();
    
    const onFinish = (values) => {
        console.log(values);
        if (id) {
            //修改
            Axios.post("http://localhost:3000/pay/update", {...values,id}).then((res) => {
                if (res.data.code == 0) {
                    message.success(res.data.message);
                    navigate("/home/pay",{ replace: true });
                }
                else {
                    message.info(res.data.message);
                }
            }).catch((err) => {
                message.error("服务器出错");
            })
        }
        else {
            //添加
            Axios.post("http://localhost:3000/pay/add", values).then((res) => {
                if (res.data.code == 0) {
                    message.success(res.data.message);
                    navigate("/home/pay",{ replace: true });
                }
                else {
                    message.info(res.data.message);
                }
            }).catch((err) => {
                message.error("服务器出错");
            })
        }
    };
    const onReset = () => {
        form.resetFields();//重置表单所有input
    };
    return (
        <Form
            {...layout}
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            style={{
                maxWidth: 600,
            }}
        >
            <h2>{id ? "修改" : "添加"}用户</h2>
            <Form.Item
                name="name"
                label="住客名"
                rules={[
                    {
                        required: true,
                        message: '请输入住客名!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="rID"
                label="客房号"
                rules={[
                    {
                        required: true,
                        message: '请输入客房号!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="payment"
                label="支付方式"
                rules={[
                    {
                        required: false,
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="money"
                label="价格"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Space>
                    <Button type="primary" htmlType="submit">
                        {id ? "保存" : "添加"}
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        重置
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};
export default Addpay;